<template>
	<uni-popup ref="boxrecordStu" type="bottom" @maskClick="maskClick" @change="popchange">
		<view class="battle-pop" @touchmove.stop>
			<view class="header-box flex-j-b">
				<view class="cat-box flex-a-c">
					<view class="flex-c-c" :class="cat_I == index ? 'checkText' :''" v-for="(item,index) in cat" :key="index" @click="entertab(index)">
						{{item}}
					</view>
				</view>
				<view class="back-img flex-j-e"><image src="https://pd.pdaxiang.com/upload/static/index/fan2.png" @click="close"></image></view>
			</view>
			<view >
				<scroll-view class="scroll-box" scroll-y="true" :scroll-with-animation="true" :scroll-anchoring="false" lower-threshold="150" @scrolltolower="scrollLower"  @touchmove.stop>
					<view class="goods-list" v-if="prizeRecordlist!=''">
						<view class="goods-box flex-j-b flex-a-c" v-for="(item,index) in prizeRecordlist" :key="index">
							<view class="left flex-a-c">
								<u-image width="48" height="48" class="avatar" :src="item.avatar"></u-image>
								<view class="nickname flex-a-c size-26">
									{{item.nickname}} 抽中<text :style="{color: item.laravel_color}">{{item.prize_level}}款</text> <view class="of-t-w" style="width:220rpx;">{{item.prize_name}}</view>
								</view>
							</view>
							<u-image width="48" height="48" class="box-img" :src="item.prize_icon"></u-image>
						</view>
					</view>
					<view class="emptya flex-column flex-c-c" v-if="prizeRecordlist==''">
						<u-image width="324" height="324" src="https://pd.pdaxiang.com/upload/static/index/boxnull.png"></u-image>
						<text class="size-28" style="margin-top: 10rpx;color: #8A94A0;">本类型的奖品尚未开出</text>
					</view>
				</scroll-view>
			</view>
			<view class="flex-c-c" v-if="jiazaiStu">
				<u-loading mode="flower"></u-loading>
			</view>
			
		</view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		prizeRecordlist: {
			type: Array,
			default() {
				return [];
			}
		},
		jiazaiStu: {
			type: Boolean,
			default() {
				return false;
			}
		},
	},
	data() {
		return {
			cat:[
				'全部','至尊','史诗','稀有'
			],
			cat_I:0,
			iconurl:this.$configs.urls
		};
	},
	watch: {},
	mounted() {
	},
	methods: {
		entertab(cat_I){
			this.cat_I = cat_I
			this.$emit('enterRecordtab',this.cat_I)
		},
		open() {
			this.$refs.boxrecordStu.open();
		},
		maskClick(){
			this.$emit('mhpagecheck')
			
			this.$emit('backrecordsLestu')
		},
		close() {
			this.$emit('mhpagecheck')
			this.$refs.boxrecordStu.close();
			this.$emit('backrecordsLestu')
		},
		scrollLower(){
			this.$emit('scrollLower')
		},
		enterRank(pk_id){
			this.$emit('enterRank',pk_id)
		},
		popchange(e) {
			this.$emit('popchange',{show:e.show})
		}
	}
};
</script>

<style lang="scss" scoped>
.battle-pop {
	width: 100vw;
	height: 720rpx;
	background: #152841;
	position: relative;
	z-index: 999;
	.emptya {
		padding-top: 100rpx;
		image {
			width: 390rpx;
			height: 390rpx;
		}
	
		text {
			margin-top: 10rpx;
		}
	}
	.scroll-box{
		height:500rpx;
		overflow:hidden
	}
	.goods-list {
		padding: 0 20rpx;
		.goods-box{
			width: 710rpx;
			min-height: 60rpx;
			border-radius: 9rpx;
			// border: 1px solid rgba(0,0,0,0.3020);
			border: 1px solid #71BDFF;
			padding: 10rpx 20rpx;
			margin-bottom: 30rpx;
			.left{
				.avatar{
					width: 48rpx;
					height: 48rpx;
					border-radius: 100%;
				}
				.nickname{
					color: #fff;
					margin-left: 20rpx;
					text{
						padding: 0 10rpx;
					}
				}
			}
			.box-img{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
	.header-box {
		padding: 20rpx;
		margin-bottom: 10rpx;
		.cat-box{
			view{
				width: 108rpx;
				height: 50rpx;
				border-radius: 8rpx;
				border: 1px solid #A1A9B3;
				margin-right: 30rpx;
				color: #A1A9B3;
			}
		}
		.checkText{
			color: #fff;
			border: 1px solid #fff !important;
		}
		.back-img {
			width: 20%;
			color: #707070;
			image {
				width: 108rpx;
				height: 44rpx;
			}
		}
	}
}
</style>
